@import url("https://fonts.googleapis.com/css2?family=Poppins:wght@100;200;300;400;500;600;700;800;900&display=swap");
@import url('https://fonts.googleapis.com/css2?family=Open+Sans:wght@100;200;300;400;500;600;700;800;900&display=swap');

html {
  font-size: 100%;
}
body {
  font-size: 16px;
  min-height: 100vh;
  cursor: url("favicon.ico"), default;
  display: grid;
  grid-template-rows: auto 1fr auto;
}
ul,
body {
  position: relative;
}

header {
  background-color: #54a6d6;
  color: rgb(247, 248, 248);
  padding-top: 0.5em;
}

h1 {
  font-family: "Poppins", sans-serif;
  text-align: center;
}
h1:hover {
  color: rgb(211, 235, 232);
  letter-spacing: 0.01em;
  transition: all 0.6s cubic-bezier(0.075, 0.82, 0.165, 1);
}
#txt-pop {
  color: rgb(10, 36, 43);
}

h4 {
  font-family: "Poppins";
  font-variant: small-caps;
  font-weight: 500;
}

.mt-3{
  position: relative;
  background: rgba(255, 255, 255, 0.5);;
  opacity: 0.9;
  border-radius: 15px;
  padding: 50px 80px 20px 50px;
  backdrop-filter: blur(20px);

}

.btn{
  font-weight: 900px;
} 

.actions {
    opacity: 0;
    transition: 0.3s;
}

.list-group-item:hover .actions {
    opacity: 100%;
    transition: 0.2s;
}

input,
ul {
  font-family: Poppins;
}

h5 {
  font-family: "Poppins";
  text-align: center;
}

.important {
  background-color: #ffd0e7a4;
}
#completedItems li{
  text-decoration: line-through;
}

/* ============= Add Task Button ============= */
#submit {
  color: #fff;
  font-weight: 500;
  color: #fafafa;
  background: #1885df;
  outline:none;
  border-radius: 5px;
  letter-spacing: 1px;
  cursor: pointer;
  border: 2px solid #2b6bca;
  transition: all 0.3s ease-in-out;
} 

#submit:hover {
  background: none;
  color: #1c99e2;
} 


/* When the list items increase, they start touching the footer so gave a lil margin to the last list item. */
li:last-child {
  margin-bottom: 20px !important;
}
/* Media Queries for Mobile Viewports */
@media (max-width: 577px) {
  #addForm input[type="submit"] {
    margin-top: 12px;
    width: 100%;
  }
  /* Child node buttons didn't have space in between and looked weird on mobile viewports*/
  li button {
    margin-bottom: 8px;
  }
}
